<template>
  <div>
    <el-row justify="center" :gutter="20">
      <el-col :span="24" style="margin-top: 12px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>场内车辆</span>
          </div>
          <div>
            <el-form inline :model="startQuickFilterFields">
              <el-form-item label="车牌号">
                <el-input v-model="startQuickFilterFields.CarNo" placeholder="车牌号"></el-input>
              </el-form-item>
              <el-form-item label="车辆类型">
                <el-select v-model="startQuickFilterFields.CarType" placeholder="车辆类型">
                  <el-option label="临时卡A" value="临时卡A"></el-option>
                  <el-option label="月卡A" value="月卡A"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开闸机号">
                <el-input v-model="startQuickFilterFields.MachNo" placeholder="开闸机号"></el-input>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker v-model="startQuickFilterFields.StartTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="开始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker v-model="startQuickFilterFields.EndTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="CarNo" label="车牌号码"></el-table-column>
            <el-table-column prop="CarType" label="车辆类型"></el-table-column>
            <el-table-column width="150" prop="InTime" label="入场结束时间"></el-table-column>
            <el-table-column prop="InLaneName" label="入场名称"></el-table-column>
            <el-table-column prop="InMachNo" label="入场空值机号"></el-table-column>
            <el-table-column width="150" prop="PayTime" label="场内支付时间"></el-table-column>
            <el-table-column prop="PayFee" label="当前停车费用"></el-table-column>
            <el-table-column prop="ParkSize" label="大场/小场"></el-table-column>
            <el-table-column prop="Memo" label="备注"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "carIn",
  data: () => ({
    startQuickFilterFields: {
      CarNo: "",
      CarType: "",
      MachNo: "",
      StartTime: "",
      EndTime: "",
    },
    tableData: [],
  }),
  methods: {
    reqListOrder() {
      axios.get("http://218.75.78.171:9082/api/bo/getInCar", {
        params: {
          ...this.startQuickFilterFields
        }
      }).then(resp => {
        console.log(resp)
        let {data: {status_code, data: {list: {CarInfo}}}} = resp
        if (CarInfo instanceof Array) {
          this.tableData = CarInfo
        } else {
          this.tableData = [CarInfo]
        }
      }).catch(err => {
        this.$message.error('查询错误');
      })
    },
    search() {
      this.reqListOrder()
    }
  },
  created() {
    this.reqListOrder()
  },
}
</script>

<style scoped>

</style>
